<template>
	<view class="hotel-pages-detail order-pages rel" :style="{background:pageColor}" v-if="detail.id">
		<!-- #ifdef H5 -->
		<view @tap="$util.goUrl({url:`/pages/service`,openType:`reLaunch`})" class="abs"
			:class="[{'back-user-ios': configInfo.isIos},{'back-user-android': !configInfo.isIos}]"
			style="z-index: 999;margin-top:25rpx;" v-if="options.pid">
			<view class="iconshouye iconfont"></view>
			<view class="back-user_text">回到首页</view>
		</view>
		<!-- #endif -->
		<!-- #ifndef H5 -->
		<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true"
			:leftIcon="options.pid ? 'iconshouye11' : 'icon-left'" :title="pageScrollTop>326?'酒店详情':' '" color="#ffffff"
			:backgroundColor="pageScrollTop>326?primaryColor:'none'">
			<!-- #ifdef APP-PLUS -->
			<view @tap="toAppShare" class="flex-1 flex-between" slot="right">
				<view></view>
				<i class="iconfont iconfenxiang1" style="font-size: 38rpx;"></i>
			</view>
			<!-- #endif -->
		</uni-nav-bar>
		<!-- #endif -->
		<banner @change="goBanner" :list="detail.imgs" height="653" :margin="0" :autoplay="true"
			:indicatorActiveColor="primaryColor" :dotWidth="20" :dotBottom="10" v-if="detail.imgs.length > 0">
		</banner>
		<view class="pd-lg fill-base">
			<view class="f-sm-title c-black text-bold">{{detail.title || '-'}}</view>
			<view class="flex-center f-paragraph text-bold c-warning mt-sm">
				¥
				<view class="flex-1 flex-y-baseline f-md-title" style="margin:0 5rpx">{{detail.min_price}}
					<view class="f-desc text-normal">/起</view>
				</view>
			</view>
			<view class="flex-warp mt-md mb-lg">
				<i class="iconfont iconpingfen1 icon-font-color" style="margin-right:4rpx;"
					:style="{backgroundImage: aindex< detail.star?`-webkit-linear-gradient(270deg, #FAD961 0%, #F7A31C 100%)`:`-webkit-linear-gradient(270deg, #E5E5E5 0%, #E5E5E5 100%)`}"
					v-for="(aitem,aindex) in 5" :key="aindex"></i>
			</view>

			<view class="f-desc mt-sm" style="color: #1D1E1D;">
				<view class="flex-y-center">
					<view style="width: 65rpx;"><i class="iconfont icondianhua_1"></i></view>
					<view class="flex-y-center text-bold"> 电话：
						<view @tap.stop="toTel(1)">{{detail.phone1}}</view>
						<view @tap.stop="toTel(2)" class="ml-md" v-if="detail.phone2">{{detail.phone2}}</view>
					</view>
				</view>
				<view class="flex-between mt-lg">
					<view class="flex-warp">
						<view style="width: 65rpx;"><i class="iconfont icondizhi21"></i></view>
						<view class="flex-warp text-bold"> 地址：<view class="ellipsis-2" style="max-width: 440rpx;">
								{{detail.address}}
							</view>
						</view>
					</view>
					<image @tap.stop="toMap" class="addr-img"
						src="https://api.huixuananmm.com/admin/anmo/hotel/addr-img.png"></image>
				</view>
			</view>
		</view>

		<view class="pt-lg pl-lg pb-sm f-paragraph c-black text-bold">服务项目</view>
		<view class="ml-md mr-md" :class="[{'flex-warp':configInfo.service_list_type===3}]">
			<view class="mt-md"
				:class="[{'fill-base pd-lg radius-16':configInfo.service_list_type!==3 && configInfo.service_list_type!==4},{'mr-md':configInfo.service_list_type===3&&index%2==0}]"
				v-for="(item,index) in detail.service" :key="index">
				<longbingbing-service-list-item :info="item"
					:o="{type:configInfo.service_list_type}"></longbingbing-service-list-item>
			</view>
		</view>
		<abnor v-if="detail.service.length == 0" percent="70%"></abnor>

		<view class="space-footer"></view>

		<!-- #ifdef APP-PLUS -->
		<view @tap.stop="toAppShare"
			class="common-share-btn detail fix flex-center flex-column c-base box-shadow radius"
			:style="{background:primaryColor}">
			<i class="iconfont iconfenxiang1"></i>
		</view>
		<longbingbing-preview-image ref="preview_image_item"></longbingbing-preview-image>
		<longbingbing-app-check-auth type="phone" ref="app_check_item"
			@confirm="$util.goUrl({ url:call_phone, openType: 'call' })"></longbingbing-app-check-auth>
		<!-- #endif -->

		<!-- #ifdef MP-WEIXIN -->
		<user-privacy ref="user_privacy" :show="false"></user-privacy>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import siteInfo from '@/siteinfo.js';
	import longbingbingServiceListItem from "@/components/longbingbing-service-list-item.vue"
	export default {
		components: {
			longbingbingServiceListItem
		},
		data() {
			return {
				options: {},
				call_phone: '',
				pageScrollTop: 0,
				detail: {},
				loading: true,
			}
		},
		computed: mapState({
			configInfo: state => state.config.configInfo,
		}),
		async onLoad(options) {
			let launch = 0
			// #ifdef MP-WEIXIN 
			let {
				scene
			} = await uni.getLaunchOptionsSync()
			launch = scene // 1154：朋友圈
			options.launch = launch
			// #endif
			options = await this.updateCommonOptions(options)
			let {
				pid = 0
			} = options
			options.pid = pid * 1
			this.options = options
			await this.$util.toAsyAccLogin()
			await this.initIndex()
			if (this.scanRecordId) {
				this.updateScanRecord()
			}
		},
		// #ifdef H5
		destroyed() {
			// #endif
			// #ifndef H5
			onUnload() {
					// #endif 
					this.updateUserItem({
						key: 'appShare',
						val: true
					})
				},
				onPullDownRefresh() {
					// #ifndef APP-PLUS
					uni.showNavigationBarLoading()
					// #endif
					this.initRefresh()
					uni.stopPullDownRefresh()
				},
				onShareTimeline() {
					let {
						id: pid = 0
					} = this.userInfo
					let {
						id,
						title,
						cover: imageUrl
					} = this.detail
					let query = `pid=${pid}&id=${id}`
					return {
						title,
						imageUrl,
						query
					}
				},
				onShareAppMessage(e) {
					let {
						id: pid = 0
					} = this.userInfo
					let {
						id,
						title,
						cover: imageUrl
					} = this.detail
					let path = `/hotel/pages/detail?pid=${pid}&id=${id}`
					this.$util.log(path)
					return {
						title,
						imageUrl,
						path,
					}
				},
				onPageScroll(e) {
					let {
						scrollTop
					} = e
					this.pageScrollTop = scrollTop
				},
				methods: {
					...mapActions(['getConfigInfo', 'getUserInfo', 'addScanRecord',
						'updateScanRecord', 'updateCommonOptions'
					]),
					...mapMutations(['updateTechnicianItem', 'updateUserItem']),
					async initIndex(refresh = false) {
						let {
							pid = 0,
								launch = 0
						} = this.options
						let code = this.scanRecordId
						// #ifdef H5
						code = this.$util.getQueryString('code')
						// #endif 
						if (pid && !code) {
							this.addScanRecord({
								type: 2,
								qr_id: pid,
								is_qr: 0
							})
						}

						let {
							id: uid = 0
						} = this.userInfo

						if (!this.configInfo.id || refresh || (pid && code && !uid)) {
							await this.getConfigInfo()
						}
						if (launch != 1154 && pid && !code && !uid) {
							await this.getUserInfo()
						}
						await this.getDetail()
						this.$util.setNavigationBarColor({
							bg: this.primaryColor
						})
						// #ifdef H5 
						this.$jweixin.initJssdk(() => {
							this.toAppShare()
						})
						// #endif
						// #ifdef MP-WEIXIN
						uni.showShareMenu({
							menus: ['shareAppMessage', 'shareTimeline']
						})
						// #endif 
					},
					initRefresh() {
						this.initIndex(true)
					},
					toAppShare() {
						let {
							id: pid = 0
						} = this.userInfo
						let {
							id,
							title,
							cover: imageUrl
						} = this.detail
						let summary = ''

						let {
							siteroot
						} = siteInfo
						let url = siteroot.split('/index.php')[0]
						let href = `${url}/${this.portName}/#/hotel/pages/detail?id=${id}&pid=${pid}`

						// #ifdef H5
						this.$jweixin.showOptionMenu()
						this.$jweixin.shareAppMessage(title, summary, href, imageUrl)
						this.$jweixin.shareTimelineMessage(title, href, imageUrl)
						// #endif
						// #ifdef APP-PLUS
						let item = {
							href,
							title,
							summary,
							imageUrl,
						}
						if (this.configInfo.isIos) {
							this.$util.showLoading()
							this.toTransImg(item)
						} else {
							this.sharePage(item)
						}
						// #endif
					},
					toTransImg(item) {
						let that = this
						let cur_unix = this.$util.DateToUnix(this.$util.formatTime(new Date(), 'YY-M-D h:m:s'))
						uni.downloadFile({
							url: item.imageUrl,
							success: (e) => {
								// 将png转换成jpg格式 只有jpg格式支持压缩api
								plus.zip.compressImage({
										src: e.tempFilePath,
										dst: `_doc/${cur_unix}.jpg`,
										format: "jpg"
									},
									response => {
										// 压缩图片
										plus.zip.compressImage({
											src: response.target,
											dst: `_doc/${cur_unix}-img.jpg`,
											quality: 50,
										}, res => {
											item.imageUrl = res.target || `/static/img/logo.png`
											that.sharePage(item)
										}, error => {
											item.imageUrl = `/static/img/logo.png`
											that.sharePage(item)
										})
									})
							}
						})
					},
					sharePage(item) {
						this.$util.hideAll()
						let {
							href,
							title,
							summary,
							imageUrl,
						} = item
						uni.share({
							provider: "weixin",
							scene: 'WXSceneSession',
							type: 0,
							href,
							title,
							summary,
							imageUrl,
							success: function(res) {
								console.log("success:" + JSON.stringify(res));
							},
							fail: function(err) {
								console.log("fail:" + JSON.stringify(err));
							}
						});
					},
					async getDetail() {
						let {
							id
						} = this.options
						let data = await this.$api.hotel.hotelInfo({
							id
						})
						this.detail = data
						this.$util.hideAll()
					},
					goBanner(current) {
						let {
							imgs: urls
						} = this.detail
						// #ifdef APP-PLUS 
						if (plus.os.name == 'Android' && plus.navigator.checkPermission(
								'android.permission.WRITE_EXTERNAL_STORAGE') === 'undetermined') {
							this.$refs.preview_image_item
								.previewImage({
									current,
									urls
								})
						} else {
							this.$util.previewImage({
								current,
								urls
							})
						}
						// #endif
						// #ifndef APP-PLUS
						this.$util.previewImage({
							current,
							urls
						})
						// #endif   
					},
					toTel(key) {
						let url = this.detail[`phone${key}`]
						// #ifdef APP-PLUS
						if (plus.os.name == 'Android' && plus.navigator.checkPermission(
								'android.permission.CALL_PHONE') ===
							'undetermined') {
							this.call_phone = url
							this.$refs.app_check_item.open()
						} else {
							this.$util.goUrl({
								url,
								openType: 'call'
							})
						}
						// #endif
						// #ifndef APP-PLUS
						this.$util.goUrl({
							url,
							openType: 'call'
						})
						// #endif
					},
					// 查看定位
					async toMap() {
						// #ifdef MP-WEIXIN
						let privacyCheck = this.$refs.user_privacy.check()
						if (privacyCheck) {
							this.$refs.user_privacy.open()
							return
						}
						// #endif
						let {
							address,
							lat,
							lng
						} = this.detail
						// #ifdef APP-PLUS
						this.$util.goMap({
							lat,
							lng,
							address,
							address_info: ''
						})
						return
						// #endif
						await this.$util.checkAuth({
							type: 'userLocation'
						})
						await uni.getLocation({
							type: 'gcj02',
						})
						await uni.openLocation({
							latitude: lat * 1,
							longitude: lng * 1,
							name: address,
							scale: 28
						})
					},
				}
		}
</script>


<style lang="scss">
	.hotel-pages-detail {
		.cover-img {
			width: 750rpx;
			height: 417rpx;
		}

		.addr-img {
			width: 69rpx;
			height: 69rpx;
		}
	}
</style>